﻿@{
    ViewBag.Title = "View";
}


<script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
<div class="inner-container" id="inner-container" style="width:8000px;">
            <div class="wrap-widget">
            	<div class="inner-widget _9">
                	<h1>Xem quảng cáo</h1>
                    <div class="widget _4x3 phone">
                    	<div class="videoPlayer">
                        	<script>
								var player,
									firstQ = false,
									width = 640,
									height = 360;
								width = $('.videoPlayer').width();
								height = width*0.5625;
								function onYouTubeIframeAPIReady() {
									player = new YT.Player('player', {
										videoId: 'tDxDEjDMreA'
									});
								}
								function playVideo() {
									player.playVideo();
									$('.playVideo').fadeOut(200,function(){
										$('.imgQuestion').delay(5000).fadeIn(300,function(){
											 aniLeft();
										});
									});
								}
								function aniLeft(){
									$('.imgQuestion').animate({left: 220},800,function(){aniRight()})
								}
								function aniRight(){
									$('.imgQuestion').animate({left: 10},700,function(){aniLeft()})
								}
								function checkFirst(){
									/*
										Kiểm tra bằng ajax để trả giá trị cho biến firstQ
									 	ajax(){};
									*/
									firstQ = true;
									if(firstQ){
										$('.imgQuestion').fadeOut(100,function(){
											$(this).animate().stop();
										});
										$('.firstQuestion').fadeOut(100);
									}else {
										/*
											load câu hỏi và hình mới.......
										*/
										$('.firstQuestion .text-error').fadeIn();
									}
								}
							</script>
                        	<div id="player"></div>
                            <div class="imgQuestion"><img src="upload/avatar/avatar.jpg" /></div>
                            <div class="playVideo" onclick="playVideo()"></div>
                        </div><!--/ videoPlayer-->
                        <div class="description">
                        	<h2>Heineken | Departure Roulette</h2>
                            <p class="vote _4">View: <span>2305</span></p>
                            <p class="company"><img src="upload/logocompany/1.jpg" /><span>Heineken</span></p>
                        </div><!--/ description-->
                    </div><!--/ .widget-->
                    <div class="widget _3x3 phone bg-color-grayLight">
                    	<div class="widget-hd">Câu hỏi dành cho bạn</div>
                        <div class="widget-content">
                        	<div class="qs-content">
                                <div class="qs-content-inner">
                                    <div class="qs-item">
                                        <div class="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</div>
                                        <div class="cnt">
                                            <label><input type="radio" name="1" />Duis autem vel eum iriure dolor in hendrerit in vulputate velit</label>
                                            <label><input type="radio" name="1" />Typi non habent claritatem insitam;</label>
                                            <label><input type="radio" name="1" />Claritas est etiam processus dynamicus, qui sequitur </label>
                                            <label><input type="radio" name="1" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                        </div><!--/ .cnt-->
                                    </div><!---/ .qs-item-->
                                    <div class="qs-item">
                                        <div class="hd">Lorem ipsum dolor sit amet</div>
                                        <div class="cnt">
                                            <label><input type="radio" name="2" />Duis autem vel eum iriure dolor in hendrerit in vulputate velit</label>
                                            <label><input type="radio" name="2" />Typi non habent claritatem insitam;</label>
                                            <label><input type="radio" name="2" />Claritas est etiam processus dynamicus, qui sequitur </label>
                                            <label><input type="radio" name="2" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                        </div><!--/ .cnt-->
                                    </div><!---/ .qs-item-->
                                    <div class="qs-item">
                                        <div class="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</div>
                                        <div class="cnt">
                                            <label><input type="radio" name="3" />Duis autem vel eum iriure dolor in hendrerit in vulputate velit</label>
                                            <label><input type="radio" name="3" />Typi non habent claritatem insitam;</label>
                                            <label><input type="radio" name="3" />Claritas est etiam processus dynamicus, qui sequitur </label>
                                            <label><input type="radio" name="3" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                        </div><!--/ .cnt-->
                                    </div><!---/ .qs-item-->
                                    <div class="qs-item">
                                        <div class="hd">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore</div>
                                        <div class="cnt">
                                            <label><input type="radio" name="4" />Duis autem vel eum iriure dolor in hendrerit in vulputate velit</label>
                                            <label><input type="radio" name="4" />Typi non habent claritatem insitam;</label>
                                            <label><input type="radio" name="4" />Claritas est etiam processus dynamicus, qui sequitur </label>
                                            <label><input type="radio" name="4" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                        </div><!--/ .cnt-->
                                    </div><!---/ .qs-item-->
                                </div><!--/ .qs-content-inner-->
                            </div><!--/ .qs-content-->
                            <div class="qs-button">
                                <button class="btn-normal pull-right" >Trả lời</button>
                            </div>
                            
                        </div><!--/.qs-content-->
                        
                        <!--/
                        	CÂU HỎI ĐẦU
                        	- Sau khi click vào button thì Ajax kiểm tra câu hỏi có đúng không
                            - Nếu đúng thì ẩn câu hỏi này và hình ảnh
                            - Nếu sai load lại câu hỏi và hình ảnh khác khác và hiện thông báo bạn trả lời sai.
                        -->
                        <div class="firstQuestion">
                        	<div class="widget-hd">Câu hỏi đầu  | <small>Bạn nhìn hình xuất hiện trên video để trả lời câu hỏi sau</small></div>
                            <div class="widget-content">
                            	<p class="text-error">Bạn trả lời sai, trả lời câu hỏi khác</p>
                                <div class="qs-item">
                                    <div class="hd">Nhân vật xuất hiên trong hình là ai?</div>
                                    
                                    <div class="cnt">
                                        <label><input type="radio" name="1" />Duis autem vel eum iriure dolor in hendrerit in vulputate velit</label>
                                        <label><input type="radio" name="1" />Typi non habent claritatem insitam;</label>
                                        <label><input type="radio" name="1" />Claritas est etiam processus dynamicus, qui sequitur </label>
                                        <label><input type="radio" name="1" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</label>
                                    </div><!--/ .cnt-->
                                </div><!---/ .qs-item-->
                            </div><!--/.qs-content-->
                            <div class="qs-button">
                                <button class="btn-normal pull-right" onclick="checkFirst()">Trả lời</button>
                            </div>
                        </div><!--/ .firstQuestion-->
                    </div><!--/ .widget-->
                    <div class="widget _2x2 phone bg-color-grayLight">
                    	<div class="widget-hd"><span><img src="upload/logocompany/1.jpg"/></span>Heineken®</div>
                        <div class="widget-content">
                        	<p>HEINEKEN International Head Office<br />
                            Visiting address:</p>
                            <p>Tweede Weteringplantsoen 21<br />
                            1017 ZD Amsterdam<br />
                            Netherlands, The<br />
                            Tel: +31 (0)20 523 92 39</p>
                        </div>
                    </div><!--/ .widget-->
                    <div class="widget _2x1 phone bg-color-grayLight">
                    	<div class="widget-hd">Thống kê</div>
                        <div class="widget-content">
                        	<ul>
                            	<li>Đăng ngày: 20/06/2012</li>
                                <li>Độ dài video: 4’</li>
                                <li>Đánh giá:<span class="vote _2">&nbsp;</span></li>
                                <li>Số lượt xem: 2305</li>
                            </ul>
                        </div>
                    </div><!--/ .widget-->
                </div><!--/ .inner-widget-->
            </div><!--/ .wrap-widget -->
         </div><!--/ .inner-container-->
